<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo">
      <el-amap-circle-marker v-for="marker in markers" :center="marker.center" :radius="marker.radius" :fill-color="marker.fillColor" :fill-opacity="marker.fillOpacity" :events="marker.events" :key="marker.id"> 
      </el-amap-circle-marker>
    </el-amap>
    <!-- 弹出窗口 -->
    <div class="dialog-wrap">
      <el-dialog title="高级记录" :visible.sync="dialog_3">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="name" label="告警设备" width="150">
          </el-table-column>
          <el-table-column prop="id" label="设备编号" width="100">
          </el-table-column>
          <el-table-column prop="time" label="告警时间段">
          </el-table-column>
          <el-table-column prop="notes" label="告警记录" width="90">
            <template slot-scope="scope">
              <el-button type="text" @click="innerVisible=true">{{scope.row.notes}}</el-button>  
            </template>
          </el-table-column> 
          <el-dialog width="40%" title="查看详情" :visible.sync="innerVisible" append-to-body>
            <table class="moni_table">
              <tr>
                <th>告警设备</th>
                <td>{{warnData.time}}</td>
              </tr>
              <tr>
                <th>设备编号</th>
                <td>{{warnData.addr}}</td>
              </tr>
              <tr>
                <th>告警时间段</th>
                <td>{{warnData.jd}}</td>
              </tr>
              <tr>
                <th>告警记录</th>
                <td>
                  <video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls">
                    your browser does not support the video tag
                  </video>
                </td>
              </tr>   
            </table>
          </el-dialog> 
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        zoom: 13,
        center: [106.55,29.57],
        plugin: ['ToolBar','Scale',{
            pName: 'MapType',
            defaultType: 1,
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          }],
        markers: [{
          id:1,
          center: [106.55,29.57],
          radius: 20,
          fillOpacity: 1,
          fillColor: 'rgba(0,0,255,1)',
          events: {
            click: () => {
              this.dialog_3=true
            }
          }
        }],      
        // 弹窗信息
        dialog_3:false, 
        innerVisible:false,
        tableData:[
        {
          name:'5号摄像头',
          id:'x202',
          time:'2018/9/1 0：00：00-23：59：59',
          notes:'3条'
        }
      ],
      warnData:{
        time:'2018/1/1 12:25:30',
        addr:'（设备或部件名称）',
        jd:'118E',
        wd:'29n',
        schd:'长江上游段',
        yjnr:'(如水质等级低于4级)'
      },
      }
    },
    methods:{

    }
  };
</script>
<style>
.amap-page-container {
  height:100%;
}
</style>
